<template>
  <div class="boyf-one" id="boyf-one" v-bind:style="styleObject">
  <div class="index-bj">
    <div class="sj-zong">
      <!-- 左边的 -->
      <div  class="sj-zong-left">
        <div class="left-top">
          <div class="logo-left"></div>
          <div class="logo-text">智慧社区服务平台大数据</div>
        </div>
        <!-- 左边数据 -->
        <div class="ones-sj">
          <div class="one-left">
            <div class="sjgk">
              <div class="sjgk-tittle">
                <div class="sjgk-tittle-bj"></div>
                <div class="sjgk-tittle-nei">
                  <div class="icon-yw"></div>
                  <div>数据概括</div>
                </div>
              </div>
              <div class="sjgk-nub">
                <div class="sjgk-nub-list">
                  <div>在册总人数</div>
                  <div><span>124</span>人</div>
                </div>
                <div class="sjgk-nub-list">
                  <div>本月已核验人数</div>
                  <div><span>99</span>人</div>
                </div>
                <div class="sjgk-nub-list">
                  <div>本月核验完成度</div>
                  <div><span>90</span>%</div>
                </div>
              </div>
            </div>
            <div class="yuant-wai">
              <div class="yuan-01">
                <div class="circleChart" id="one" ></div>
                <div class="xbin">性别分布</div>
              </div>
              <div class="yuan-01">
                <div class="circleChart" id="two" ></div>
                <div class="xbin">年龄分布</div>
              </div>

            </div>
          </div>
          <div class="one-right">
            <div class="sjgk-tittle2">
              <div class="sjgk-tittle-bj"></div>
              <div class="sjgk-tittle-nei">
                <div class="icon-yw"></div>
                <div>核验情况</div>
              </div>
            </div>
            <div class="right-heyn-center">
              <div class="moths-wai">
                <div class="motsh-nubs">
                  <div class="news-moths">
                    <div class="news-moths-name">本月生成区块链凭证数</div>
                    <div class="news-motsh-nub"><span>100</span>人</div>
                  </div>
                  <div class="news-moths">
                    <div class="news-moths-name">累计生成区块链凭证数</div>
                    <div class="news-motsh-nub"><span>100</span>人</div>
                  </div>
                </div>
                <!-- 圆形图 -->
                <div class="right-moths">
                  <div class="yuan-02">
                    <div  class="three-swg" id="three" ></div>
                    <div class="jiye-text">本月核验方式分布</div>
                  </div>
                  <div class="yuan-02">
                    <div  class="three-swg" id="four" ></div>
                    <div class="jiye-text">本月核验方式分布</div>
                  </div>
                </div>
              </div>
              <!-- 文字无缝滚动 -->
              <div class="wenzigund" >
                <div class="txt-scroll txt-scroll-curs">
                  <div class="scrollbox">
                    <div class="txt">
                      深圳市移联天下电子商务有限公司成立于2014年， 是集移动互联网新消费模式、品质消费体验、社交分享于一体的会员权益服务平台。基于移动互联网消费升级新需求，连接线上线下消费新场景，通过大数据、人工智能及云计算等技术手段，致力于为用户连接优质服务、快乐分享、成就美好生活。
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>

        </div>
        <div class="mapimg">
          <img src="../../../assets/img/map.png">
        </div>
      </div>
      <!-- 中间的 -->
      <div class="sj-zong-center">
        <div>
          <div class="sjgk-tittle2">
            <div class="sjgk-tittle-bj"></div>
            <div class="sjgk-tittle-nei">
              <div class="icon-yw"></div>
              <div>核验情况</div>
            </div>
          </div>
          <div class="situation">
            <div class="situation-nub">
              <div class="situation-nub-list">
                <div>本月核验人次</div>
                <div><span>124</span>人</div>
              </div>
              <div class="situation-nub-list bodelgih">
                <div>累计核验人次</div>
                <div><span>124</span>人</div>
              </div>
            </div>
            <div>
              <div class="jid-hena">季度核验情况</div>
              <div>
                <div class="zhexian" id="main"></div>
              </div>
              <div class="jid-hena">年度核验情况</div>
              <div>
                <div class="zhexian" id="main2"></div>
              </div>
            </div>
          </div>
          <div class="sjgk-tittle2">
            <div class="sjgk-tittle-bj"></div>
            <div class="sjgk-tittle-nei">
              <div class="icon-yw"></div>
              <div>实时核验情况</div>
            </div>
          </div>
          <div class="real-time">
            <div class="real-time-top">
              <div class="zhan-name">展商名称</div>
              <div class="zhan-guan">关注度</div>
              <div class="zhan-wei">展位</div>
            </div>
            <div class="real-time-center scrollDiv" id='s2'>
              <ul>

                <li class="real-time-list">
                  <div class="nube-lfet">1</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">2</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list">
                  <div class="nube-lfet">3</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">4</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list">
                  <div class="nube-lfet">5</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">6</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list ">
                  <div class="nube-lfet">7</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">8</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list ">
                  <div class="nube-lfet">9</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active" >
                  <div class="nube-lfet">10</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list ">
                  <div class="nube-lfet">11</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">12</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list">
                  <div class="nube-lfet">13</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
                <li class="real-time-list active">
                  <div class="nube-lfet">14</div>
                  <div  class="zhan-name2">展商展位</div>
                  <div  class="zhan-guan">1021</div>
                  <div  class="zhan-guan">014#</div>
                </li>
              </ul>
            </div>

          </div>
        </div>

      </div>
      <!-- 右边的 -->
      <div class="sj-zong-right">
        <div>
          <div class="sjgk-tittle2">
            <div class="sjgk-tittle-bj"></div>
            <div class="sjgk-tittle-nei">
              <div class="icon-yw"></div>
              <div>社区情况</div>
            </div>
          </div>
          <div class="situation2">
            <div class="situation-nub">
              <div class="situation-nub-list">
                <div>在线社区数</div>
                <div><span>124</span>人</div>
              </div>
              <div class="situation-nub-list ">
                <div>完成核验数</div>
                <div><span>124</span>人</div>
              </div>
            </div>
            <div>
              <div class="jid-hena">在册人数占比</div>
              <div class="percentage">
                <div class="percentage" id='percentage'></div>
              </div>
              <!--本月核验完成度排行  -->
              <div>
                <div class="sjgk-tittle2">
                  <div class="sjgk-tittle-bj"></div>
                  <div class="sjgk-tittle-nei">
                    <div class="icon-yw"></div>
                    <div>本月核验完成度排行</div>
                  </div>
                </div>
                <div class="tomos-ranking">
                  <div class="ranking-list">
                    <div class="nubs-icon">1</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list">
                    <div class="nubs-icon">2</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list">
                    <div class="nubs-icon">3</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list">
                    <div class="nubs-icon">4</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list">
                    <div class="nubs-icon">5</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                </div>
                <div class="sjgk-tittle2">
                  <div class="sjgk-tittle-bj"></div>
                  <div class="sjgk-tittle-nei">
                    <div class="icon-yw"></div>
                    <div>年度核验完成度排行</div>
                  </div>
                </div>
                <div class="tomos-ranking">
                  <div class="ranking-list nianduing">
                    <div class="nubs-icon">1</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list nianduing">
                    <div class="nubs-icon">2</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list nianduing">
                    <div class="nubs-icon">3</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list nianduing">
                    <div class="nubs-icon">4</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                  <div class="ranking-list nianduing">
                    <div class="nubs-icon">5</div>
                    <div class="ranking-list-name">某某科技有限公司</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
  </div>
</template>

<script>
  import {
    getStreet,
    fetchDataPost,
    certificationPost,
    getResidentCount,
    getCommunity,
    addResident,
    editResident,
    download
  } from '../../../api/resident';
  var queryTabs2Request = {
    url: "/usercenter/community/community/"
  };
  var queryTabsRequest = {
    url: "/usercenter/community/street/1"
  };
  var queryRequest = {
    url: "/residentcenter/resident/page-list"
  };
  var addRequest = {
    url: "/residentcenter/resident/create/resident"
  };
  var updateRequest = {
    url: "/residentcenter/resident/update/resident"
  };
  export default {
    name: 'resident', // 需与菜单的功能编码一致
    //   directives: { elDragDialog },
    data() {

      return {
        styleObject: {

        }
      }
    },
    mounted() {
      var ratio = document.documentElement.clientWidth / document.getElementById("boyf-one").clientWidth;
      this.styleObject = {
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: "100%"
      }
    },
    created() {

      // /* 文字无缝滚动 */
      // $('.txt-scroll').txtscroll({
      //   'speed': 20
      // });

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

.boyf-one{
  width: 1920px;
  height: 1080px;
  background-image: none;
  background-color: rgb(16, 16, 16);
  transform: scale(1);
  transform-origin: left top;
  background-size: 100%;
}
body::-webkit-scrollbar {
  display: none;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline
}

* {
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -icab-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box
}

@media screen and (max-device-width:960px) {
  body {
    -webkit-text-size-adjust: none
  }
}



html {
  overflow-y: scroll;
  overflow-x: hidden
}

select {
  border: 1px solid #dee1e3;
  font-size: 12px;
  color: #333;
  line-height: 12px
}

ul {
  list-style: none
}

ol {
  list-style: decimal inside
}

blockquote,
q {
  quotes: none
}



table {
  border-collapse: collapse;
  border-spacing: 0
}

a {
  text-decoration: none;
  cursor: pointer
}

a:hover {
  text-decoration: none
}

a:focus {
  outline: 0
}

span {
  color: inherit
}

a img {
  vertical-align: middle
}

label[for] {
  cursor: pointer
}

body,
html {
  height: 100%;
}

body {
  overflow: hidden;
  background: #000;
}
.index-bj{
  width: 100%;
  height: 100%;
  position: relative;
}
.index-bj::after {
  content: "";
  background-image: url(../../../assets/img/bj.png);
  background-size: 100% 100%;

  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.left-top{
  width: 1104px;
  height: 71px;
  pointer-events: auto;
  border-radius: 0px;
  border: 1px solid rgb(157, 157, 157);
  background-color: rgba(207, 207, 207, 0.18);
  display: flex;
}
.logo-left{
  width: 122px;
  height: 66px;

  pointer-events: auto;
  image-rendering: -webkit-optimize-contrast;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-image: url(https://img.alicdn.com/tfs/TB1nCWxMbH1gK0jSZFwXXc7aXXa-251-64.svg);
  background: rgb(255, 255, 255);
  border-radius: 0px;
  cursor: pointer;
}
.logo-text{
  font-size: 35px;
  color: #fff;
  margin-top: 8px;
  border-left: 1px solid #fff;
  height: 50px;
  margin-left: 10px;
  padding-left: 10px;
}
.sjgk-tittle{
  width: 599px;
  height: 40px;
  pointer-events: auto;
  border-radius: 0px;
  position: relative;
}
.sjgk-tittle-bj{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  border-radius: inherit;
  border: 1px solid rgba(245, 245, 245, 0.35);
  background-color: rgb(72 72 72);
  opacity: 0.25;
}
.sjgk{
  margin-top: 20px;
  width: 599px;
}
.icon-yw{
  width: 11px;
  height: 11px;
  background-color: rgb(253, 126, 0);
  margin-top: 5px;
  margin-right: 8px;
}
.sjgk-tittle-nei{
  display: flex;
  margin-left: 20px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  font-size: 20px;
  position: absolute;
  font-weight: bold;
  font-family: arial, Arial, sans-serif;
  top: 10px;
}
.sjgk-nub{
  display: flex;
  padding: 0 20px;
  margin-top: 20px;
}
.sjgk-nub-list{
  color: rgb(255, 255, 255);
  font-weight: normal;
  font-family: "Microsoft Yahei", Arial, sans-serif;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 100px;
}
.sjgk-nub-list span{
  align-items: baseline;
  color: rgb(253, 126, 0);
  text-align: center;
  white-space: nowrap;
  justify-content: flex-start;
  font-family: Microsoft Yahei;
  font-size:36px;
  margin-right: 5px;
}
.yuan-01{
  width: 150px;
  margin-left: 60px;
}
.circleChart_text{
  color: rgb(83, 83, 83);
  font-size: 30px!important;
}
.yuant-wai{
  margin-top: 40px;
  display: flex;
}
.xbin{
  text-align: center;
  font-weight: normal;
  font-family: arial, Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  margin-top: 0px;
}
.circleChart{
  width: 150px;
  height: 150px;
}
.ones-sj{
  display: flex;
}
.one-right{
  width: 490px;
  margin-left: 5px;
}
.sjgk-tittle2{
  width:100%;
  height: 40px;
  pointer-events: auto;
  border-radius: 0px;
  position: relative;
  margin-top: 20px;

}
.news-moths-name{
  font-size: 12px;
  color: rgb(255, 255, 255);
}
.news-moths{
  margin-top: 50px;
  padding-bottom: 20px;
}
.news-motsh-nub span{
  align-items: baseline;
  color: rgb(253, 126, 0);
  text-align: center;
  white-space: nowrap;
  justify-content: flex-start;
  font-family: Microsoft Yahei;
  font-size: 30px;
}
.news-motsh-nub{
  font-size: 16px;
  color: rgb(255, 255, 255);
  margin-top: 10px;
}
.yuan-02{
  width: 165px;
  text-align: center;
}
.three-swg{
  width:165px;
  height:165px;
}
.moths-wai{
  display: flex;
}
.jiye-text{
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.right-moths{
  padding-top: 35px;
  display: flex;
  margin-left: 20px;
}
.wenzigund{
  width: 100%;
}
/*txt-scroll*/
.txt-scroll{ width: 100%; height: 30px; line-height: 30px; padding: 0 5px 0 0px; }
.txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; }
.txt-scroll .txt,
.txt-scroll .txt-clone{ display: inline; position: relative;  font-size: 14px;   color: rgb(253, 126, 0); }
.right-heyn-center{
  border-left: 2px solid #666;
  margin-left: 3px;
  margin-top: 15px;
  padding-left: 15px;
}
.sj-zong{
  display: flex;
}
.sj-zong-center{
  flex: 1;
  margin-left: 10px;
}
.sj-zong-right{
  width: 290px;

  margin-right: 20px;
  margin-left: 10px;
}
.situation{
  background: rgb(255, 255, 255,0.03);
  height: 600px;
  border:1px solid rgb(255, 255, 255,0.1)
}
.situation-nub-list{
  color: rgb(255, 255, 255);
  font-weight: normal;
  font-family: "Microsoft Yahei", Arial, sans-serif;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  padding-left: 35px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.situation-nub-list span {
  align-items: baseline;
  color: rgb(253, 126, 0);
  text-align: center;
  white-space: nowrap;
  justify-content: flex-start;
  font-family: Microsoft Yahei;
  font-size: 30px;
  margin-right: 5px;
}
.situation-nub{
  display: flex;
  border-bottom: 1px solid #666;

}
.bodelgih{
  border-left: 1px solid #666;
}
.jid-hena{
  font-size: 16px;
  margin-top: 20px;
  color: #fff;
  padding-left: 15px;
}
.zhexian{
  width: 100%;
  height: 180px;
  margin-top: 10px;
}
.real-time{
  border: 1px solid rgb(255, 255, 255,0.2);
  margin-top: 5px;
  padding: 5px;
}
.real-time-top{
  display: flex;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 13px;
  background: rgb(255, 255, 255,0.03);
  width: 100%;
}
.zhan-name{
  width: 40%;
  margin-left: 10%;
}
.zhan-guan{
  width: 25%;
  text-align: center;
}
.zhan-wei{
  width: 25%;
  text-align: center;
}
.real-time-list{
  display: flex;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #fff;
}
.nube-lfet{
  width: 10%;
  text-align: center;
}
.zhan-name2{
  width: 40%;
}
.real-time-center{
  height: 290px;
  overflow: hidden;
}
.real-time-list.active{
  background-color: rgb(33 33 33 );
}
.percentage{
  width: 100%;
  height: 200px;
}
.nubs-icon{
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background: rgb(55, 67, 72);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  margin-right: 5px;
}
.ranking-list-name{
  height: 24px;
  line-height: 24px;
  color: #000;
  border-radius: 5px;
  width: 282px;
  background: linear-gradient(
          90deg
      , rgba(255, 255, 255, 0.19) 50%, rgba(121, 218, 255, 0) 100%);
  font-size: 12px;
  color: rgb(253, 126, 0);
  padding-left: 15px;
}
.ranking-list{
  display: flex;
  margin-top: 15px;
  margin-left: 10px;
}
.tomos-ranking{
  padding: 10px 0;
}
.situation2{
  background: rgb(255, 255, 255,0.03);
  height: 630px;
  border: 1px solid rgb(255, 255, 255,0.1);
}
.animation{
  -webkit-animation:flipInX 1s 0s ease infinite;
  -moz-animation:flipInX 1s 0s ease infinite;}

@-webkit-keyframes flipInX{
  0%{-webkit-transform:perspective(400px) rotateX(0deg);}
  10%{-webkit-transform:perspective(400px) rotateX(90deg);}
  40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
  70%{-webkit-transform:perspective(400px) rotateX(10deg)}
  100%{-webkit-transform:perspective(400px) rotateX(0deg);
  }
}
@-moz-keyframes flipInX{
  0%{-moz-transform:perspective(400px) rotateX(90deg);
  }
  40%{-moz-transform:perspective(400px) rotateX(-10deg)}
  70%{-moz-transform:perspective(400px) rotateX(10deg)}
  100%{-moz-transform:perspective(400px) rotateX(0deg);
  }
}
.mapimg{margin-top: 20px; width: 1100px;height: 600px;}
.mapimg img{ width: 100%; height: 600px;}

</style>